<template>
  <div>
    <div id="md-it" class="markdown-body" v-html="htmlContent"></div>
  </div>
</template>

<script>
import {MD_CONTENT} from "@/js/constants"
// 如果在main.js导入时优先级更高
import "github-markdown-css"
import "@/styles/github-markdown-css/github-markdown.css"
// highlight.js 代码样式
import "@/styles/highlight/index.scss"

const hljs = require("highlight.js") // https://highlightjs.org/
const md = require("markdown-it")({
  html: true,
  breaks: true,
  linkify: true,
  highlight: function (str, lang) {
    try {
      if (lang && hljs.getLanguage(lang)) {
        return hljs.highlight(str, {language: lang}).value
      } else {
        // 如果没有设置lang或者lang拼写错误
        return hljs.highlightAuto(str).value
      }
      // eslint-disable-next-line no-empty
    } catch (_) {
    }
    return ""
  },
}).use(require("markdown-it-mark"))

export default {
  name: "MarkdownItRender",
  data() {
    return {
      htmlContent: "",
    }
  },
  methods: {},
  created() {
    this.htmlContent = md.render(MD_CONTENT)
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
//@import "github-markdown-css";
//@import "../styles/github-markdown-css/github-markdown.css";

.markdown-body {
  width: 600px;
  text-align: left;
  padding: 20px;
  margin: 0 auto;
  border: 1px cornflowerblue solid;
  border-radius: 10px;
}

</style>